<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>天气案例原始方式</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
  </head>
  <body>
    <div id="root">
      <!--ishot ? "炎热" : "凉爽"    三元表达式-->
      <h2>今天天气很{{info}}</h2>
      <button @click="changeWeather">切换天气，函数方式</button>
        <br/>
      <!--如果是很简单的逻辑，可以直接写在事件后，注意不要带this   this.ishot = !this.ishot-->
      <button @click="ishot = !ishot">切换天气，事件中处理</button>
      <!--如果不止做一件事，还是使用函数方式，便于复用和维护-->
    </div>
  </body>

  <script type="text/javascript">
    const vm = new Vue({
      el: "#root",
      data: {
        //boolean值，天气热不热
        ishot: true,
      },
      computed: {
        info() {
          return this.ishot ? "炎热" : "凉爽";
        },
      },
      methods: {
        changeWeather() {
          //切换后计算属性会自动调用get更新值
          this.ishot = !this.ishot;
        },
      },
    });
  </script>
</html>
